<%-- 
    Document   : editpersonalProject
    Created on : Jul 30, 2012, 11:36:05 AM
    Author     : VANANH
--%>

<%-- 
    Document   : q275
    Created on : Jul 5, 2012, 1:51:58 PM
    Author     : ems
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="../css/popup.css"/>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/kapi.js"></script>
    </head>
    <script type="text/javascript" language="javascript">
        $j = jQuery.noConflict();
        $j(document).ready(function(){
            $j(".checkAll").live("click",function(){     
                flag = $j('.checkAll').is(':checked');
                $j(".check_select").each(function(){
                    $j('.check_select')  .attr('checked', flag);
                });
                var boool;
                if( $j(this).is(":checked"))
                {
                    boool = true;
                }
                else
                {
                    boool = false;
                }
                $j.post("editpersonalProject.jsp?action=addAllN100Tour&boool="+boool,function(data){

                });
            });
            
        });
        
        $j(".cbx_editEmp").live("change", function() {
            $j(".imgload").show();
             setTimeout(function(){
                 $j(".imgload").hidden();
            }, 5000);
        });
    </script>
    <style type="text/css">
        .alert_s{
            color: red;
            float: left;
            font-size: 14px;
            font-weight: normal;
            margin-top: 5px;
            text-align: center;
            text-transform: uppercase;
            width: 100%;
        }   
        .imgload{
            background-color: red; 
            width: 80px;
            height: 10px;
            display: none;
            position: absolute;
            z-index: 100;
            }
        
    </style>
    <body style=" float:left; width:auto; height:auto; margin:0px;">
        <f:view>
             <a4j:status onstart="#{rich:component('statPane')}.show()" onstop="#{rich:component('statPane')}.hide()" />
            <f:loadBundle basename="#{environmentSession.localizationSource}" var="locale"/>
            <a4j:form id="group">
                <h:outputText value="<div class='permission' lang='#{loginSession.right.MENU_ADM_VIEW}'></div>" escape="false"/>
                <div class="popup" style="height:425px; width:739px">
                    <div class="popup-header">
                        <div class="title">  <h:outputText value="NHÂN VIÊN THAM GIA DỰ ÁN" /></div>
                    </div>
                    <div class="popup-content">
                        <div class="main_content" style="height:350px">
                            <div class="MasterdataContentScroll2" style="height:160px">

                                <div align="center" id="workPhaseContainer" style="width: 98.5%;float: left;margin-left: 5px;">
                                    <div class="imgload">
                                        
                                    </div>
                                    <div style="text-align: center; float: right; margin-left: 77.9%; margin-top: 5px; position: absolute"> 
                                        <a4j:region>
                                            <h:selectOneMenu value="#{c150Controller.FN600}" styleClass="cbx_editEmp" style="width:150" >
                                                <f:selectItem itemLabel="ALL" itemValue="0"/>   
                                                <f:selectItems value="#{n500Controller.combN850}" />
                                                <a4j:support event="onchange" reRender="listN100" actionListener="#{c150Controller.actionSearchfn850}" />
                                            </h:selectOneMenu>
                                        </a4j:region>
                                    </div>
                                    <rich:tabPanel selectedTab="#{c150Controller.tabGroup}" switchType="ajax" style="margin-top:5px;">
                                        <rich:tab name="TABADDDA" action="#{c150Controller.choosetabADD}" label="ADD" style="width:30px">
                                               <h:panelGroup id="listN100">
                                                   <div class="list_content" style="margin-top: 0px;" >
                                                        <div style="width: 100% !important;">
                                                            <table style="width: 100%">
                                                                <tr>
                                                                    <td class="democolumn" style="width: 2%"><h:outputText value="STT"/></td>                                        
                                                                    <td class="democolumn" style="width: 2%"><h:selectBooleanCheckbox styleClass="checkAll" /></td>
                                                                    <td class="democolumn" style="width: 9%"><h:outputText value="Tên nhân viên"/></td> 
                                                                    <td class="democolumn" style="width: 6%"><h:outputText value="Số điện thoại"/></td>
                                                                    <td class="democolumn" style="width: 12%"><h:outputText value="Email"/></td>

                                                                </tr>
                                                            </table>
                                                            <div style="float:left;height: 273px;overflow: auto;width: 100%">
                                                                <table style="width: 100%">
                                                                    <a4j:repeat value="#{c150Controller.listN100}" var="item" rowKeyVar="index" >
                                                                        <tr class="noteRow" lang="<h:outputText value="#{item.pn100}"/>">
                                                                            <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: center; width: 3%; border-left: 1px solid #C4C0C9;">
                                                                                <h:outputText value="#{index+1}"/>
                                                                            </td>

                                                                            <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: center;width: 3%;">
                                                                                <div class="itemaction">
                                                                                    <h:selectBooleanCheckbox styleClass="check_select" lang="#{item.pn100}" style="float:left;margin-left:3px !important;" value=""/>
                                                         
                                                                                </div>

                                                                            </td>
                                                                            <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: left;width: 12%">
                                                                                <div style="text-align: left;width: 100%;">
                                                                                   <h:outputText styleClass="itemcontent itemcontent#{item.pn100}" value="#{item.hoten}" lang="#{item.pn100}"></h:outputText>

                                                                                </div>
                                                                            </td>

                                                                            <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="width: 6%">
                                                                                <div style="text-align: left;width: 100%;">
                                                                                      <h:outputText value="#{item.nv121}" styleClass="sendSMS_person" lang="page=sendSMSitemEmployee&group=1&hoten=#{item.hoten}&phone=#{item.nv121}&fn100=#{item.pn100}"/>
                                                                                                          
                                                                                </div>
                                                                            </td>
                                                                            <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: left;width: 12%">
                                                                                <div style="float:left;width: 90%;">
                                                                                    <h:outputLink value="popupSendMailPerson.jsp?page=employee&idx=#{item.pn100}&mailx=#{item.nv105}&typex=employee&KeepThis=true&amp;TB_iframe=true&amp;height=653&amp;width=741&amp;modal=true" styleClass="thickbox add_new" id="thickbox3"  ><h:outputText value="#{item.nv105}" /></h:outputLink>
                                                                                    
                                                                                </div>
                                                                            </td>
                                                                           
                                                                    </a4j:repeat>

                                                                </table>
                                                            </div>
                                                           
                                                        </div>

                                                        <!-- End List Content-->    
                                                    </div>
                                               </h:panelGroup>
                                            </rich:tab>
                                        <rich:tab name="TABGROUPDA" label="GROUP" action="#{c150Controller.choosetabGroup}" style="width:30px">
                                                <h:panelGroup id="listN100GROUP">
                                                   <div class="list_content" style="margin-top: 0px;" >
                                                        <div style="width: 100% !important;">
                                                            <table style="width: 100%">
                                                                <tr>
                                                                    <td class="democolumn" style="width: 2%"><h:outputText value="STT"/></td>                                        
                                                                    <td class="democolumn" style="width: 9%"><h:outputText value="Tên nhân viên"/></td> 
                                                                    <td class="democolumn" style="width: 6%"><h:outputText value="Phòng ban"/></td>
                                                                    <td class="democolumn" style="width: 6%"><h:outputText value="Công việc"/></td>
                                                                    <td class="democolumn" style="width: 12%"><h:outputText value="Người giao"/></td>

                                                                </tr>
                                                            </table>
                                                            <div style="float:left;height: 273px;overflow: auto;width: 100%">
                                                                <table style="width: 100%">
                                                                    <a4j:repeat value="#{c150Controller.listB030R}" var="item" rowKeyVar="index" >
                                                                        <tr class="noteRow" lang="<h:outputText value="#{item.pn100}"/>">
                                                                            <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: center; width: 3%; border-left: 1px solid #C4C0C9;">
                                                                                <h:outputText value="#{index+1}"/>
                                                                                <h:outputText value="#{c150Controller.listB030R}"/>
                                                                            </td>
                                                                            <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: left;width: 12%">
                                                                                <div style="text-align: left;width: 100%;">
                                                                                  <h:outputText styleClass="itemcontent itemcontent#{item.pn100}" value="#{item.hoten}" lang="#{item.pn100}"></h:outputText>
                                                                                </div>
                                                                            </td>

                                                                            <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="width: 6%">
                                                                                <div style="text-align: left;width: 100%;">
                                                                                                    
                                                                                </div>
                                                                            </td>
                                                                            <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="width: 6%">
                                                                                <div style="text-align: left;width: 100%;">
                                                                                                    
                                                                                </div>
                                                                            </td>
                                                                            <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: left;width: 12%">
                                                                                <div style="float:left;width: 90%;">
                                                                                  
                                                                                </div>
                                                                            </td>
                                                                           
                                                                    </a4j:repeat>

                                                                </table>
                                                            </div>
                                                           
                                                        </div>

                                                        <!-- End List Content-->    
                                                    </div>
                                               </h:panelGroup>
                                        </rich:tab>
                                       
                                    </rich:tabPanel>
                                    
                                </div>
                            </div>
                            <h:inputHidden value="#{c150Controller.FN600}"/>
                        </div>
                        
                    </div>
                     <rich:modalPanel styleClass="pleaseimage" id="statPane" autosized="true" minHeight="10" minWidth="80"
                                 height="10" width="80" zindex="2000">
                        <h:graphicImage value="/images/loadingAnimation.gif" alt="ai" />
                     </rich:modalPanel>
                    <div class="popup-footer"><%-- 
         onclick="jQuery.fancybox.close(); --%>
                        <div class="buttonsave buttonReload" onclick="reloadProject()" lang="<h:outputText value="#{personalProjectController.emp}"/>"  ><span><h:outputText value="#{locale.close}"/></span></div>
                       
                    </div>
                </div>
            </a4j:form>
        </f:view>

    </body>
</html>
<script type="text/javascript">
    $j(document).ready(function(){
        yhight = ($j('.popup').height()-90)+"px" ;
        $j('.main_content').css('height',yhight );
        $j('.popup_content').css('height',yhight  );
    });

    function expand(obj){
        $j(obj).next().slideToggle('slow');
    }
    /*
     * Set selected style on click the source list
     */
    function changeStyleLeft(obj) {
        $j(".objSelect").removeClass("objSelect");
        $j(obj).addClass("objSelect");
    }

    /*
     * Set selected style on click the destination list
     */
    function changeStyleRight(obj) {
        //alert_s($j(obj).parent(".parentClass").find(".objClass").className);
        $j(".objSelect").removeClass("objSelect");
        $j(obj).addClass("objSelect");
    }

    /*
     * Move the selected on source to the destination with other type on double click
     */
    function moveRight(obj) {
        // the "align" atrribute on source item contains ID item
        // add item in dest list with 3 columns

        var group = $j(obj).attr("title");
        var id = $j(obj).attr("lang");

        if( $j(obj).hasClass('group')){

            var div = "";
            $j('.lgroupchild'+group).children().each(function() {
                div += "<div class='destinationItem ' ondblclick='moveLeft(this)' onclick='changeStyleRight(this)' lang='" + $j(this).attr('lang') + "' title='"+$j(this).attr('title')+"'>";
                div +=  $j(this).text();
                div += "</div>";
            });

            if($j('.rgroupparent'+group).attr('class')== undefined){
                var head = "<div title='"+group+"' ondblclick='moveLeft(this)' onclick='expand(this)' class='group rgroupparent"+group+"'>"+$j('.lgroupparent'+group).text()+"</div>";
                head += "<div style='display:none' class='child rgroupchild"+group+"'>";
                $j('#destinationDiv').append(head + div+"</div>");
            }
            else{
                $j('.rgroupchild'+group).append(div);
            }
            $j('.lgroupchild'+group).remove();
            $j('.lgroupparent'+group).remove();

        }

        else{
            var right = "<div class='destinationItem ' ondblclick='moveLeft(this)' onclick='changeStyleRight(this)' lang='" + id + "' title='"+group+"'>";
            right +=  $j(obj).text();
            right += "</div>";
            if($j('.rgroupparent'+group).attr('class')== undefined){
                var head = "<div title='"+group+"' ondblclick='moveLeft(this)' onclick='expand(this)' class='group rgroupparent"+group+"'>"+$j('.lgroupparent'+group).text()+"</div>";
                head += "<div style='display:none' class='child rgroupchild"+group+"'>";
                $j('#destinationDiv').append(head+right+"</div>");
                $j(obj).remove();


            }

            else{
                $j('.rgroupchild'+group).append(right);
                $j(obj).remove();

            }
            if($j('.lgroupchild'+group).html().length < 4){
                $j('.lgroupchild'+group).remove();
                $j('.lgroupparent'+group).remove();
            }
        }


    }


    /*
     *
     * Move the selected on dest to the source with other type on double click
     */
    function moveLeft(obj) {

        var group = $j(obj).attr("title");
        var id = $j(obj).attr("lang");

        if( $j(obj).hasClass('group')){

            var div = "";
            $j('.rgroupchild'+group).children().each(function() {
                div += "<div class='sourceItem ' ondblclick='moveRight(this)' onclick='changeStyleLeft(this)' lang='" + $j(this).attr('lang') + "' title='"+$j(this).attr('title')+"'>";
                div +=  $j(this).text();
                div += "</div>";
            });
            //alert(div);
            if($j('.lgroupparent'+group).attr('class')== undefined){
                var head = "<div title='"+group+"' ondblclick='moveRight(this)' onclick='expand(this)' class='group lgroupparent"+group+"'>"+$j('.rgroupparent'+group).text()+"</div>";
                head += "<div style='display:none' class='child lgroupchild"+group+"'>";
                $j('#sourceDiv').append(head + div+"</div>");
            }
            else{
                $j('.lgroupchild'+group).append(div);
            }
            $j('.rgroupchild'+group).remove();
            $j('.rgroupparent'+group).remove();

        }
        else{
            var left = "<div class='sourceItem' ondblclick='moveRight(this)' onclick='changeStyleLeft(this)' lang='"
                + id + "' title='"+group+"' >" +$j(obj).text();+ "</div>";
            if($j('.lgroupparent'+group).attr('class')== undefined){
                var head = "<div title='"+group+"' ondblclick='moveRight(this)' onclick='expand(this)' class='group lgroupparent"+group+"'>"+$j('.rgroupparent'+group).text()+"</div>";
                head += "<div style='display:none' class='child lgroupchild"+group+"'>";
                $j('#sourceDiv').append(head+left+"</div>");
                $j(obj).remove();
            }

            else{
                $j('.lgroupchild'+group).append(left);
                $j(obj).remove();

            }
            if($j('.rgroupchild'+group).html().length < 4){
                $j('.rgroupchild'+group).remove();
                $j('.rgroupparent'+group).remove();
            }
        }


    }

    /*
     * Move the selected on source to the destination with other type by button click
     */
    function moveBtnRight() {
        $j("#sourceDiv").find("div").each(function() {
            if($j(this).hasClass("objSelect")) {
                moveRight(this);
            }
        });
    }

    /*
     * Move the selected on dest to the source with other type by button click
     */
    function moveBtnLeft() {
        $j("#destinationDiv").find("div").each(function() {
            if($j(this).hasClass("objSelect")) {
                moveLeft(this);
            }
        });
    }

    /*
     * Move all from source to the dest with other type by button click
     */
    function moveAllRight() {
        $j("#sourceDiv").find("div").each(function() {
            if($j(this).hasClass("group")) {

                moveRight(this);
            }
        });
    }

    /*
     * Move all from dest to the source with other type by button click
     */
    function moveAllLeft() {
        $j("#destinationDiv").find("div").each(function() {
            if($j(this).hasClass("group")) {

                moveLeft(this);
            }
        });
    }
    /*
     * Save dest list
     */
    function reloadProject(){
        emp =  $j('.buttonReload').attr('lang');       
        window.location.href="project.jsp?emp="+emp;
    }
    function saveB030() {
        var list = "0,";
        $j(".destinationItem").each(function() {
            list+= $j(this).attr('lang')+",";
        });
       
        showPleaseWait();        
        var tmp = $j(".dataPerson").find("input").toArray();
        fc150 = $j(tmp[1]).val();                                              
        cd651 = $j(tmp[2]).val();                        
        fb050 =$j(tmp[3]).val();
        fc500 =$j(tmp[4]).val();  
        $j(".alert").text("");
       // $j(".alert").css("display","block");
        $j.post("projectC650action.jsp?fc150="+fc150+"&cd651="+cd651+"&fb050="+fb050+"&fc500="+fc500, { values2 :list   },
        function(data){
            if(data !=null){
                hidePleaseWait();
                $j(".alert_s").text("Bạn cập nhật thành công!");
                // $j(".alert_s").slideUp(100).fadeIn(400);
                $j('.alert_s').delay(3000).fadeIn('slow');
            }
            
        });
    }
</script>
